<template>
  <div class="chat_box_4">
    <dv-border-box-7 :color="['#2EC8ED', '#2EC8ED']">
      <dv-loading v-if="loading" />
      <template v-else>
        <title-box title="各地区改造数" />
        <div class="chat_box_content flex">
          <div id="chat6" class="flex-1 chat_box_item" />
        </div>
      </template>
    </dv-border-box-7>
  </div>
</template>

<script>
import * as echarts from "echarts";
import TitleBox from "./title_box.vue";
export default {
  components: { TitleBox },

  data() {
    return {
      loading: false,
      localData: [],
      barData1: [],
      barData2: [],
    };
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    async fetchData() {
      // try {
      //   this.loading = true;

      //   const { data } = await reqChartData4();
      //   this.localData = data.local;
      //   this.barData1 = data.data[0];
      //   this.barData2 = data.data[1];
      //   this.loading = false;

      //   this.$nextTick(() => {
      //     this.initChart1();
      //   });
      // } catch (error) {
      //   this.loading = false;
      // }

      this.$nextTick(() => {
        this.initChart1();
      });
    },

    initChart1() {
      var myChart = echarts.init(document.getElementById("chat6"));
      const options = {
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{b}<br/> {c}人",
          confine: true,
          backgroundColor: "rgba(255,255,255,0.7)",
        },
        legend: {
          data: ["改造总数", "审核总数"],
          top: "5%",
          right: "5%",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
        grid: {
          top: "28%",
          left: "6%",
          bottom: "18%",
          right: "6%",
        },

        xAxis: {
          boundaryGap: ["0%", "0%"],
          type: "category",
          // data: this.localData,
          data: [
            "xx镇1",
            "xx镇2",
            "xx镇3",
            "xx镇4",
            "xx镇5",
            "xx镇6",
            "xx镇7",
            "xx镇8",
            "xx镇9",
            "xx镇10",
          ],
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#00869B",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#64D8E6",
          },
        },
        yAxis: {
          boundaryGap: ["0%", "0%"],
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              width: 1,
              color: "#00869B",
            },
          },
          axisLabel: {
            color: "#00869B",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(65, 173, 251, 0.2)",
              type: "dashed",
              dashOffset: 5,
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "改造总数",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(100, 216, 230, 1)" },
                { offset: 1, color: "rgba(46, 200, 237, 0.04)" },
              ]),
              barBorderRadius: 10,
            },
            barWidth: 14,
            label: {
              show: true,
              position: "top",
              fontSize: 14,
              color: "#64D8E6",
              offset: [0, -5],
            },
            // data: this.barData1,
            data: [123, 124, 126, 164, 88, 123, 453, 222, 215, 215],
          },
          {
            type: "bar",
            name: "审核总数",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(144, 241, 120, 1)" },
                { offset: 1, color: "rgba(144, 241, 120, 0)" },
              ]),
              barBorderRadius: 10,
            },
            barWidth: 14,
            label: {
              show: true,
              position: "top",
              fontSize: 14,
              color: "#64D8E6",
              offset: [0, -5],
            },
            // data: this.barData2,
            data: [164, 88, 123, 453, 123, 124, 126, 164, 88, 123],
          },
        ],
      };

      myChart.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.chat_box_4 {
  z-index: 99;
  position: absolute;
  box-sizing: border-box;
  padding: 10px;

  left: 30%;
  top: 61vh;
  right: 30%;
  // width: 100%;
  height: 28vh;
  // height: calc(34vh - 84px);

  .chat_box_content {
    width: 100%;
    display: flex;
    height: calc(28vh - 7vh);
    .chat_box_item {
      height: 100%;
    }
  }
}
</style>
